<template>
  <mu-container class="form_container">
    <mu-paper class="demo-paper" style="position:relative;" :z-depth="1" @click="handleAddress"
      v-if="orderinfo.mailname">
      <div style="font-size:14px;">{{orderinfo.mailname}} <span>{{orderinfo.mailmobile}}</span></div>
      <div>{{orderinfo.provincename}} {{orderinfo.cityname}} {{orderinfo.countyname}} {{orderinfo.address}}</div>
      <mu-icon size="36" value="keyboard_arrow_right" class="form_icon"></mu-icon>
    </mu-paper>

    <mu-paper :z-depth="0" class="demo-paper" v-if="!orderinfo.mailname">
      <mu-button large style="width: 100%;" class="form_button" @click="goAdd">
        <mu-icon right value="add"></mu-icon>
        新增邮寄地址
      </mu-button>
    </mu-paper>

    <mu-paper class="demo-paper paper_size" :z-depth="1">
      <p>投标人名称：{{orderinfo.bidder}}</p>
      <p>邀请码：{{orderinfo.invitecode}}</p>
      <p>法人姓名：{{orderinfo.frname}}</p>
      <p>身份证号：{{orderinfo.frid}}</p>
      <mu-divider></mu-divider>
      <p>开标时间：{{orderinfo.kbtime}}</p>
      <p>开标有效期：{{orderinfo.indatenum}}天</p>
      <p>保函有效截止日：{{orderinfo.enddate}}</p>
      <!-- <p>投标保证金金额：{{form.earnest}} 万</p> -->
      <p>项目及标段名称：{{orderinfo.bidsection}}</p>
    </mu-paper>

    <mu-paper class="demo-paper form_submit" :z-depth="1">
      <p style="font-size:16px;">应付：<span style="color:#f18241;font-size:20px;">{{orderinfo.amount}} 元</span></p>
      <div style="font-size:16px;overflow:hidden" v-if="coupons.length != '0'">
        <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />

        <van-popup v-model="showList" position="bottom">
          <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :show-exchange-bar="false"
            :disabled-coupons="disabledCoupons" @change="onChange" exchange-button-disabled />
        </van-popup>
        <mu-divider></mu-divider>
        <p style="float:right;">
          实付：<span ref="prices" style="color:#f18241;font-size:20px;">{{orderinfo.amount}} 元</span>
        </p>
      </div>
    </mu-paper>

    <mu-paper class="demo-paper form_submit" :z-depth="1">
      选择支付方式
      <div>
        <van-radio-group v-model="checked" class="pay" @change="selectpaytype">
          <div style="text-align: center;    padding-top: 14px;">
            <!-- <img src="../assets/long.jpg" alt=""> -->
            <van-icon name="wechat" color="rgb(9,187,7)" size="4em" />
            <van-radio name="1">微信支付</van-radio>
          </div>
          <div>
            <img src="../assets/timg.jpg" alt="">
            <van-radio name="2">在线转账</van-radio>
          </div>
        </van-radio-group>
      </div>
      <div style="margin-top:20px;">
        <mu-button small style="width:49%" @click="back">返回</mu-button>
        <mu-button small class="form_creat" @click="payOrder">去支付</mu-button>
      </div>
    </mu-paper>
  </mu-container>
</template>

<script>
  import Loading from 'muse-ui-loading';
  import 'muse-ui-loading/dist/muse-ui-loading.css';
  import axiso from 'axios';
  import {
    ImagePreview
  } from 'vant';
  export default {
    data() {
      return {
        cardVue: {},
        loading: false,
        filelist: [],
        active: '',
        couponlist: [],
        orderinfo: {},
        showList: false,
        coupons: [],
        checked: '1',
        paytype: '1',
        couponid: '',
        disabledCoupons: [],
        chosenCoupon: -1,
      }
    },
    mounted() {
      let _this = this;
      let rowguid = this.$route.query.rowguid;
      this.$api.orderdetail({
        rowguid: rowguid
      }).then(function (res) {
        _this.filelist = res.orderfile;
        _this.orderinfo = res.orderinfo;
        _this.$api.mycoupon_mobile({
          orderamount: res.orderinfo.amount
        }).then(function (data) {
          _this.coupons = data.ky;
          _this.disabledCoupons = data.bky;
        })
      })
    },
    methods: {
      onChange(index) {
        this.showList = false;
        this.chosenCoupon = index;
        if (index > -1) {
          this.$refs.prices.innerText = this.orderinfo.amount - this.coupons[index].value / 100 + '元';
          this.couponid = this.coupons[index].id
        } else {
          this.$refs.prices.innerText = this.orderinfo.amount;
          this.couponid = '';
        }
      },
      back() {
        this.$router.go(-1)
      },
      selectpaytype(e) {
        this.paytype = e;
      },
      payOrder() {
        let _this = this;
        let data = {
          guaranteeid: this.orderinfo.rowguid,
          paytype: this.paytype,
          clienttype: 'mobile',
          couponid: this.couponid
        }
        this.$api.payOrder(data).then(function (res) {
          if (_this.paytype == '1') {
            ImagePreview([res.payurl]);
          } else {
            window.location.href = res.payurl;
          }

        })
      },
      goAdd() {
        this.toPath('/EditAddress');
        this.$router.push({
          path: '/EditAddress',
          query: {
            rowguid: this.orderinfo.rowguid
          }
        })
      },
      handleAddress() {
        this.toPath('/addressmg')
        this.$router.push({
          path: '/addressmg',
          query: {
            rowguid: this.orderinfo.rowguid
          }
        })
      },
      changeCount(index, item) {
        if (item.enable == '1') {
          this.active = index - 1;
          this.couponid = item.rowguid
          this.$refs.prices.innerText = this.orderinfo.amount - item.value;
          //   this.form.couponid = item.rowguid;
          //   this.couponid = item.rowguid;
          //   $vue.$refs.prices.innerText = this.form.amount - item.value;
        } else {
          this.common.showMsg('该优惠券不满足使用要求', 'warning')
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .pay {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
  }

  .demo-paper {
    margin: 10px 0;
    padding: 15px;
    color: #524949
  }

  .mu-buttons {
    margin: 0 auto;
    width: 100%;
    background-color: #ffffff;
    color: #333333;
    box-shadow: none;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
  }

  .form_creat {
    background: #f18241;
    color: #fff;
    width: 49%
  }

  .form_icon {
    position: absolute;
    top: 20px;
    right: 10px;
    color: #bbbbbb;
  }

  .paper_size {
    font-size: 14px;
  }

  .demo-chip {
    margin-bottom: 5px;
    margin-left: 5px;
  }

  .counSty {
    background-color: #fff;
    border: 1px solid #f18241;
    color: #524949
  }

  .active {
    background-color: #f18241;
    border: 1px solid #f18241;
    color: #ffffff;
  }

  img {
    width: 70px;
    height: 70px;
  }

  .form_container {
    margin-bottom: 100px;
  }
</style>